<template>
  <view class="coupon-layout">
    <my-header title="优惠劵"></my-header>
    <my-content class="content">
      <view class="tab">
        <view
          @click="changeType(item.id)"
          class="tab_item"
          v-for="item in typeArr"
          :key="item.id"
          :class="type == item.id ? 'active' : ''"
        >
          {{ item.title }}
        </view>
      </view>
      <scroll-view
        class="scroll"
        refresher-background=""
        :refresher-triggered="refreshStatus"
        @refresherrefresh="refresh"
        :refresher-enabled="true"
        scroll-y="true"
        @scrolltolower="lower"
      >
        <view class="coupon" v-if="couponData.length > 0 && resultStatus">
          <view class="coupon_item" v-for="item in couponData" :key="item.id">
            <!-- 屎山代码不是我写的哈，我也是二改开发 -->
            <view class="coupon_right">
              <view class="coupon_title">{{ item.name }}</view>
              <view class="coupon_bottom">
                <view class="created_at">有效期至{{ item.expired_at }}</view>
              </view>
              <view class="coupon-info">
                <view class="coupon_remark">{{ item.remark }}</view>
                <view class="coupon_min_amount" v-if="item.min_amount > 0">满{{ item.min_amount }}可用</view>
                <view class="coupon_min_amount" v-else>无门槛</view>
              </view>
            </view>
            <view class="coupon_left">
              <!-- <image class="coupon_bg" src="http://www.qixdian.cn/upload/20230909/64fc4443c17d3.png"></image> -->
              <view class="coupon_amount" v-if="item.type == 1">
                <view class="coupon_amount_icon">￥</view>
                <view class="amount-num">{{ item.amount }}</view>
              </view>

              <view class="use" @click="use(item)">立即使用</view>
            </view>
          </view>
        </view>

        <view v-if="couponData.length == 0 && resultStatus" class="coupon none">
          <image
            mode="widthFix"
            src="http://www.qixdian.cn/upload/20230830/64ef6428c3b9a.png"
            class="none_image"
          ></image>
          <view class="none_text">暂无优惠券</view>
        </view>
      </scroll-view>

      <view class="bottom" @click="header('/pages/user/couponList')">优惠券历史记录 ></view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      type: '',
      typeArr: [
        { id: '', title: '全部' },
        { id: 1, title: '盲盒券' },
        { id: 2, title: '包邮券' },
      ],
      page: 1,
      last_page: 1,
      couponData: [],
      resultStatus: false,
      refreshStatus: false,
    }
  },
  onLoad(option) {
    this.getData(1)
  },
  onShow() {},
  methods: {
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getData(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getData(2)
    },
    use(item) {
      console.log(item)
      if (item.type == 1 && item.blind_box_coupon.length == 1) {
        this.header(`/pages/index/detail?id=${item.blind_box_coupon[0].blind_box_id}`)
      }
    },
    getData(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userCoupons
        .index({ page: this.page, type: this.type, status: 1 })
        .then((res) => {
          if (res.code === 200) {
            this.resultStatus = true
            this.refreshStatus = false
            uni.hideLoading()
            this.last_page = res.data.last_page
            if (type == 1) {
              this.couponData = this.couponData.concat(res.data.data)
            } else {
              this.couponData = res.data.data
            }
            console.log(this.couponData)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changeType(id) {
      if (this.type != id) {
        this.type = id
        this.page = 1
        this.getData(2)
      }
    },
  },
}
</script>

<style lang="scss">
.coupon-layout {
  background-color: #141414;
  height: 100vh;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .tab {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50rpx;
    margin: 20rpx;
    font-size: 24rpx;
    .tab_item {
      font-size: 30rpx;
      border-radius: 5rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      margin-right: 20rpx;
      padding: 10rpx;
      color: #808080;
      &.active {
        background-image: url('https://www.dingxians.cn/images/box/tab-bg-active.png');
        background-size: 100% 100%;
        color: #ded000;
      }
    }
  }

  .scroll {
    flex: 1;
    margin: 0 auto;
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .coupon {
    display: flex;
    flex-direction: column;
    width: 715rpx;
    margin: 0 auto;
    height: 100%;
    /* height: calc(100vh - 160rpx); */
    // border: 1rpx solid red;

    &.none {
      display: flex;
      justify-content: center;
      align-items: center;
      /* height: calc(100vh - 400rpx); */
      .none_image {
        width: 200rpx;
      }
      .none_text {
        color: #999;
        font-size: 24rpx;
      }
    }
    .coupon_item {
      display: flex;
      margin-bottom: 20rpx;
      height: 200rpx;
      border-radius: 10rpx;
      background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-coupon-item.png');
      background-size: 100% 100%;
      /* filter: brightness(0.8) grayscale(1); */
      // overflow: hidden;
      .coupon_left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // background-color: #A361F6;
        height: 200rpx;
        width: 180rpx;
        /* margin-right: 20rpx; */
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        position: relative;
        z-index: 2;
        .coupon_bg {
          position: absolute;
          top: 0;
          left: 0;
          height: 200rpx;
          width: 180rpx;
          border-top-left-radius: 10rpx;
          border-bottom-left-radius: 10rpx;
          z-index: -1;
        }
        .coupon_amount {
          color: white;
          font-weight: bold;
          display: flex;
          align-items: baseline;
          text-shadow: 0px 0px 16px #a84700;

          .coupon_amount_icon {
            font-size: 48rpx;
          }
          .amount-num {
            font-size: 78rpx;
          }
        }

        .use {
          width: 148rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          font-size: 24rpx;
          background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-use-coupon.png');
          background-size: 100% 100%;
          margin-right: 10rpx;
          color: #fff;
          margin-top: 10rpx;
          font-weight: bold;
        }
      }
      .coupon_right {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .coupon_title {
          color: #ded000;
          font-family: 'youshe';
          font-size: 48rpx;
          margin-left: 24rpx;
          margin-top: 18rpx;
        }

        .coupon-info {
          color: #fffab5;

          display: flex;
          .coupon_remark {
            font-size: 24rpx;
            margin-left: 24rpx;
            margin-bottom: 18rpx;
          }
          .coupon_min_amount {
            font-size: 24rpx;
            margin-left: 10rpx;
          }
        }

        .coupon_bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .created_at {
            font-size: 24rpx;
            color: #000;
            padding: 8rpx 24rpx;
            background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-coupon-item-time.png');
            background-size: 100% 100%;
          }
        }
      }
    }
  }

  .bottom {
    color: #999;
    height: 80rpx;
    line-height: 80rpx;
    position: fixed;
    bottom: 0;
    left: calc(50% - 125rpx);
    text-align: center;
    width: 250rpx;
    font-size: 30rpx;
  }
}
</style>
